<template>
   <span v-for="item in dataRowButtonList" :key="item.buttonKey">
    <el-tooltip
      v-if="item?.isDisabled"
      content="请到【权限设置】->【数据按钮权限】中设置授权规则"
      effect="customized"
    >
      <el-button
        :key="item.buttonKey"
        :type="item?.color === '' ? item?.types : ''"
        :size="item?.size"
        :text="item?.isText"
        :round="item?.isRound"
        :plain="item?.isPlain"
        :circle="item?.isCircle"
        :color="item?.color"
        :disabled="item?.isDisabled"
        @click="openPage(item.buttonKey)"
        style="margin-left: 10px"
      >
        <template #icon v-if="item?.icon !== ''">
          <el-icon :color="item?.textColor">
            <component class="icons" :is="item?.icon"></component>
          </el-icon>
        </template>
        <span :style="{ color: item?.textColor }">{{ item.buttonName }}</span>
      </el-button>
    </el-tooltip>
    <el-button
      v-if="!item?.isDisabled"
      :key="item.buttonKey"
      :type="item?.color === '' ? item?.types : ''"
      :size="item?.size"
      :text="item?.isText"
      :round="item?.isRound"
      :plain="item?.isPlain"
      :circle="item?.isCircle"
      :color="item?.color"
      :disabled="item?.isDisabled"
      @click="openPage(item.buttonKey)"
      style="margin-left: 10px"
    >
      <template #icon v-if="item?.icon !== ''">
        <el-icon :color="item?.textColor">
          <component class="icons" :is="item?.icon"></component>
        </el-icon>
      </template>
      <span :style="{ color: item?.textColor }">{{ item.buttonName }}</span>
    </el-button>
  </span>
</template>
<script lang="ts">
import { getMenuButtonList } from "@/api/button";
import { GetMenuDataButtonAuth } from "@/api/match";
import { GetParamUrl } from "@/api/publicTool";
import { ButtonRoleTypeEnum } from "@/enum/public";
import { useUserStore } from "@/store/user";
import { defineComponent, onMounted, reactive, ref } from "vue";
export default defineComponent({
  props: {
    model: {
      type: String,
      required: true,
    },
  },

  setup(props, context) {
    const userStore = useUserStore();
    //初始化数据
    onMounted(() => {
      if (userStore.buttonAuth.length === 0) {
        setUseUserStoreButtonAuth().then(() => {
          getMenuDataButtonMsg();
        });
      } else {
        getMenuDataButtonMsg();
      }
    });
    const model = reactive({
      dataButtonList: [],
      dataRow: "",
    });
    const dataRowButtonList = ref<any>();
    //获取数据按钮权限
    const getMenuDataButtonMsg = async () => {
      model.dataButtonList = userStore.buttonAuth;
      model.dataRow = JSON.stringify(props.model);
      await GetMenuDataButtonAuth(model)
        .then(({ data, code }) => {
          if (code == 200) {
            dataRowButtonList.value = data;
          } else {
            dataRowButtonList.value = [];
          }
        })
        .catch(() => {
          dataRowButtonList.value = [];
        });
    };

    //设置本地缓存的ButtonAuth数据
    const setUseUserStoreButtonAuth = async function () {
      var menuId = GetParamUrl("MenuId");
      await getMenuButtonList({
        menuId: menuId,
        buttonRoleType: ButtonRoleTypeEnum.RowButton,
      }).then(({ data, code }) => {
        if (code == 200) {
          userStore.buttonAuth = data;
        }
      });
    };

    const openPage = function (row: string) {
      context.emit(row, props.model);
    };
    return {
      openPage,
      dataRowButtonList,
    };
  },
  components: {},
});
</script>
<style scoped>
::v-deep .el-badge__content {
  transform: translateY(-70%) translateX(0%) !important; /* 调整位置 */
}
</style>